<template>
<div class="main-container">
  <common_nav :title="title" backTitle="" :appPathObj="{}" :routerPath="{path: '/user/basic/index', query:{}}"></common_nav>
  <div class="form">
    <el-form :model="form" :rules="formRules" ref="form" label-width="120px" class="demo-ruleForm">
      <el-tabs v-model="activeName">
        <el-tab-pane label="基本信息" name="1">
          <el-form-item label="业务名称" prop="name">
            <el-input type="text" v-model="form.name" size="medium" style="width:400px;" placeholder="限20个中文字符"></el-input>
          </el-form-item>
          <el-form-item label="别名" prop="name">
            <el-input type="text" v-model="form.alias_name" size="medium" style="width:400px;" placeholder="限20个中文字符"></el-input>
          </el-form-item>
          <el-form-item label="业务编码" prop="code">
            <el-input type="text" v-model="form.code" size="medium" v-if="form.id > 0" disabled style="width:400px;" placeholder="限20个字符，建议英文或拼音"></el-input>
            <el-input type="text" v-model="form.code" size="medium" v-else style="width:400px;" placeholder="限20个以内英文字母或拼音"></el-input>
          </el-form-item>
          <el-form-item label="业务类型" prop="type">
            <el-radio-group v-model="form.type">
              <el-radio label="1">应用业务</el-radio>
              <el-radio label="2">选项业务</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="关联应用" prop="" >
            <el-select v-model="form.assoc_app_id" multiple collapse-tags placeholder="请选择">
              <el-option
                  v-for="item in app_list"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="快捷菜单" prop="">
            <el-switch active-value="1" inactive-value="0" v-model="form.quick_menu"></el-switch>
          </el-form-item>
          <el-form-item label="状态" prop="">
            <el-switch active-value="1" inactive-value="0" v-model="form.status"></el-switch>
          </el-form-item>
          <el-form-item label="说明" prop="">
            <el-input type="textarea" v-model="form.remark" style="width: 400px;"></el-input>
          </el-form-item>

          <el-form-item label="审核角色" prop="audit_role">
            <div v-if="form.audit_role.length > 0">
              <div v-for="(item, k) in form.audit_role" :key="k">
                <el-button type="primary" size="small" @click="selectRole(k)" icon="el-icon-edit" >
                  <span>{{item.name}}【{{item.group_name}}】</span>
                </el-button>
                <el-button type="primary" size="small" v-if="item.field.name">提交字段【{{item.field.title}}】</el-button>
                <el-button type="danger" size="small" @click="deleteAuditRole(k)">删除</el-button>
              </div>
            </div>
            <div v-else>
              <el-button type="primary" size="small" @click="getAppAuditRole">选择审核角色</el-button>
            </div>
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane label="字段信息" name="2">
          <el-form-item label="业务字段" prop="">
            <div class="data"  v-for="(item1, k) in form.field" :key="k">
              <i class="el-icon-circle-close remove1" @click="removeField(k)" v-if="item1.field_code!='name' && item1.field_code!='status'"></i>
              <div class="data_list">
                <div>名称：</div>
                <div class="data_list_option">
                  <el-input v-model="item1.field_name" type="text" size="small" v-if="item1.field_code=='status'" disabled></el-input>
                  <el-input v-model="item1.field_name" type="text" size="small" v-else></el-input>
                </div>
                <div>编码：</div>
                <div class="data_list_option">
                  <el-input v-model="item1.field_code" type="text" size="small" v-if="item1.field_code=='name' || item1.field_code=='status'" disabled></el-input>
                  <el-input v-model="item1.field_code" type="text" size="small" v-else></el-input>
                </div>
                <div>是否必填：</div>
                <div class="data_list_option">
                  <el-radio-group v-model="item1.field_require" v-if="item1.field_code=='name'  || item1.field_code=='status'" disabled>
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="0">否</el-radio>
                  </el-radio-group>
                  <el-radio-group v-model="item1.field_require" v-else>
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="0">否</el-radio>
                  </el-radio-group>
                </div>
              </div>
              <div class="data_list">
                <div>类型：</div>
                <div>
                <el-radio-group v-model="item1.field_type"  v-if="item1.field_code=='name'  || item1.field_code=='status'" disabled>
                  <el-radio :label="item3.value" v-for="(item3, k3) in field_type_list" :key="k3">{{ item3.label }}</el-radio>
                </el-radio-group>
                  <el-radio-group v-model="item1.field_type"  v-else>
                    <el-radio :label="item3.value" v-for="(item3, k3) in field_type_list" :key="k3">{{ item3.label }}</el-radio>
                  </el-radio-group>
                </div>
              </div>
              <div class="data_list" v-if="item1.field_type==4 || item1.field_type==2 || item1.field_type==3">
                <div>选项：</div>
                <div class="option_list" v-for="(item2, k1) in item1.option" :key="k1">

                  <el-input type="text" size="small" v-model="item2.name" style="width: 130px;"  v-if="item1.field_code=='name'  || item1.field_code=='status'" disabled></el-input>
                  <el-input type="text" size="small" v-model="item2.name" style="width: 130px;" placeholder="限20个字符"  v-else></el-input>
                  <i class="el-icon-circle-close remove2" @click="removeOption(k, k1)" v-if="item1.field_code!='name' && item1.field_code!='status'"></i>

                </div>
                <div class="option_list" v-if="item1.field_code!='name'  && item1.field_code!='status'">
                  <el-button type="primary" size="small" icon="el-icon-plus" @click="addOption(k)">添加自定义输入框</el-button>
                </div>
                <div class="option_list" v-if="item1.field_code!='name'  && item1.field_code!='status'">
                  <el-button type="primary" size="small" icon="el-icon-plus" @click="addDialogOption(k)">添加业务选项</el-button>
                </div>
              </div>
            </div>
            <el-button type="primary" size="medium" icon="el-icon-plus" @click="addField">添加业务字段</el-button>
          </el-form-item>
        </el-tab-pane>
      </el-tabs>
    </el-form>

    <div class="submit_btn">
      <router-link :to="{path: '/user/basic/index', query:{}}">
        <el-button size="medium" type="danger">返回</el-button>
      </router-link>&nbsp;
      <span v-if="form.allow_edit==true">
        <el-button type="primary" size="medium" @click="onSubmit()" v-if="!loading">确 定</el-button>
        <el-button type="primary" size="medium" v-else>保存中..</el-button>
      </span>
    </div>
  </div>
  <dialogOption :show.sync="dialog.status" :index="dialog.index" @callFn="getDataAll"></dialogOption>
<!--
  <dialogRole :show.sync="dialog.roleStatus" :index="index" @callFn="setRole"></dialogRole>
-->

</div>
</template>

<script>
import { save,getInfo,getDataAll,getAssocBusinessApp } from '@/api/user/basic'
import { getAppAuditRole } from '@/api/user/app'
import dialogOption from './component/dialogOption'
/*
import dialogRole from '@/views/user/setting/role/component/dialogRole';
*/


export default {
  name: "basic_edit",
  components: {dialogOption},
  data() {
    return {
      dialog: {
        status: false,
        roleStatus: false,
        index: -1,
      },
      title: '添加业务',
      activeName: '1',
      form: {
        id: '',
        name: '',
        alias_name:'',
        type: '',
        code: '',
        assoc_app_id: [],
        quick_menu: '0',
        status: '1',
        remark: '',
        audit_role: [],
        allow_edit: true,
        delete_field_id: [],
        field: [{
          field_name: '名称',
          field_code: 'name',
          field_type: 1,
          field_require: 1,
          option_type: '',
          option: []
        },{
          field_name: '状态',
          field_code: 'status',
          field_type: 4,
          field_require: 1,
          option_type: '',
          option: [{id:1,name:'开启'},{id:0,name:'关闭'}]
        }],
        compute_rules: []
      },
      compute_rules_template: {name: '', daterange_field: [], date_type:'', compute_mode: '', compute_field: '',result_field:''},
      date_type: [
        {id: 'month', name: '按月份计算'},
        {id: 'date', name: '按日期计算'}
      ],
      field_template: {
        field_name: '',
        field_code: '',
        field_type: '',
        field_require: '',
        option_type: '',
        option: []
      },
      option_template: {
        id:'', name:''
      },
      formRules: {
        name: [{required: true, message: '请输入名称', trigger: 'blur'}],
        alias_name: [{required: true, message: '请输入别名', trigger: 'blur'}],
        type: [{required: true, message: '请选择业务类型', trigger: 'blur'}],
        code: [{required: true, message: '请输入业务编码', trigger: 'blur'}],
      },
      field_type_list: [
        {value: 1,label: '输入框'},
        {value: 4,label: '状态'},
        {value: 2,label: '单选'},
        {value: 3,label: '多选'},
        {value: 5,label: '多行输入框'},
        {value: 6,label: '日期'},
        {value: 7,label: '时间'},
        {value: 8,label: '日期+时间'},
/*
        {value: 10,label: '日期区间'},
*/
        {value: 11,label: '月份'},
        {value: 9,label: '上传图片'},
      ],
      compute_mode: [
        {name: '加 +', value: '+'},{name: '减 -', value: '-'},{name: '乘 *', value: '*'},{name: '除 /', value: '/'},
      ],
      app_list: [],
      loading: false,
      index: 0,
    }
  },
  created() {
    this.getAppList()
    if (typeof this.$route.query.id != 'undefined') {
      this.getInfo()
      this.title = '编辑业务'
    } else {
      this.getAppAuditRole()
    }
  },
  methods: {
    addItem() {
      this.form.compute_rules.push(this.compute_rules_template)
    },
    removeItem(index) {
      this.form.compute_rules.splice(index,1)
    },
    selectRole(index) {
      this.index = index
      this.dialog.roleStatus = true
    },
    getAppAuditRole() {
      getAppAuditRole({code:'basic_business'}).then(res => {
        if (res.code == 0) {
          this.form.audit_role = res.data.list
        }
      })
    },
    setRole(value) {
      this.form.audit_role[parseInt(value.index)].role_id=value.checkedItem.id
      this.form.audit_role[parseInt(value.index)].role_name=value.checkedItem.title
    },
    getDataAll(params) {
      let status = true
      for (let i in this.form.field[params.index].option) {
        if (this.form.field[params.index].option[i].business_id == params.business_id) {
          status = false
          break
        }
      }
      if (status) {
        this.option_template.business_id = params.business_id
        this.option_template.name = params.business_name+'[业务项]'
        this.form.field[params.index].option_type = 2
        this.form.field[params.index].option=[JSON.parse(JSON.stringify(this.option_template))]
        this.option_template.business_id = ''
        this.option_template.value = ''
      }
    },
    getAppList() {
      getAssocBusinessApp().then(res => {
        if (res.code == 0) {
          this.app_list = res.data
        }
      })
    },
    getInfo() {
      getInfo({id: this.$route.query.id}).then(res => {
        if (res.code == 0) {
          this.form = res.data.info
          if (this.form.level == 0) {
            this.title = '查看基础业务'
          }
        }
      })
    },
    deleteAuditRole(index) {
      this.form.audit_role.splice(index,1)
      for (let i in this.form.audit_role) {
        this.form.audit_role[i].index = parseInt(i)+1
      }
    },
    addField() {
      this.form.field.push(JSON.parse(JSON.stringify(this.field_template)))
    },
    removeField(k) {
      if (typeof this.form.field[k].id != 'undefined') {
         this.form.delete_field_id.push(this.form.field[k].id)
      }
      this.form.field.splice(k, 1)
    },
    removeOption(k, k1) {
      this.form.field[k].option.splice(k1, 1)
      if (this.form.field[k].option.length == 0) {
        this.form.field[k].option_type = ''
      }
    },
    addOption(k) {
      if (this.form.field[k].option_type == 2) {
        this.$message.error('自定义输入框选项和业务选项只能二选一，请先删除选项')
        return false
      }
      if (typeof this.form.field[k].option == 'string') {
        this.form.field[k].option = []
      }
      if (this.form.field[k].option.length >= 15) {
        this.$message.error('自定义输入框选项最多只能添加15项')
        return false
      }
      this.option_template.id = this.form.field[k].option.length + 1
      this.form.field[k].option_type = 1
      this.form.field[k].option.push(JSON.parse(JSON.stringify(this.option_template)))
    },
    addDialogOption(field_index) {
      if (this.form.field[field_index].option_type == 1) {
        this.$message.error('自定义选项和业务选项只能二选一，请先删除选项')
        return false
      }
      this.dialog.index = field_index
      this.dialog.status = true
    },
    onSubmit() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.loading = true
          save(this.form).then(res => {
            this.loading = false
            if (res.code == 0) {
              this.$router.push({path: '/user/basic/index'})
            }
          })
        }
      })
    },

  }
}
</script>

<style scoped lang="scss">
.form {
  border: 0px solid #ff0000;
  .submit_btn {
    margin-left: 120px;
  }
  /deep/.el-tabs {
    width: 99%;
    margin: 0 auto;
  }
  .data {
    width: 90%;
    border-radius: 5px;
    background: #f3f3f3;
    margin-bottom: 15px;
    position: relative;
    padding-top: 10px;
    border: 0px solid #ff0000;
    .remove1 {
      position: absolute;
      top: -6px;
      right: -8px;
      font-size: 20px;
      cursor:pointer;
    }
    .data_list {
      display: flex;
      margin: 5px;
      flex-wrap: wrap;
      line-height: 40px;
      position: relative;
      .option_list {
        margin-right: 10px;
        .remove2 {
          font-size: 18px;
          cursor: pointer;
        }
      }
      .data_list_option {
        margin-right: 20px;
        border:0px solid #ccc;
      }
    }
  }
}
</style>